<template>
	<view class="content">
		<!-- <share-page :showSharePage='showSharePage'></share-page> -->
		<view class="paly-bar">
			<video :src="introduce.firstCoursePath"
			 autoplay
			 id="myvideo" class="video" initial-time="0" object-fit="cover"
				@pause="pause" @timeupdate="timeupdate">
			</video>
			<!-- <view v-if="introduce.u_type=='u-video'">
				<video :src="introduce.firstCoursePath" class="video" initial-time="0" object-fit="cover" @pause="pause"
					@timeupdate="timeupdate">
				</video>
			</view>
			<view v-if="introduce.u_type=='u-mp3'">
				<audio :src="introduce.firstCoursePath" class="video"></audio>
			</view>
			<view class="video" v-else>
				<web-view :src="introduce.firstCoursePath"></web-view>
			</view> -->
		</view>
		<view class="course-content">
			<view class="switch-tab">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" class="switch-tab-bar"
					active-color="#F4333C" inactive-color="#5E5E5E" font-size="30rpx" :bold="false"></u-tabs>
			</view>
			<view class="course-introduce">
				<view class="text-introduce">
					<text>{{introduce.seriesName}}</text>
					<text>{{introduce.categoryStr}}</text>
				</view>
				<view class="teacher-msg">
					<view class="teacher-img">
						<image :src="introduce.expertFace ? introduce.expertFace : '../../static/img/person/head.png'"
							alt=""></image>
					</view>
					<text>{{introduce.expertName}}</text>
					<view class="attention">
						<image src="@/static/img/courseBuy/attention.png" alt=""></image>
						<text @tap="followFn">{{introduce.expertIsSub=="0"?'关注':'已关注'}}</text>
					</view>
				</view>
			</view>
			<view class="browse-history">
				<view class="frequency-row f-row">
					<image src="@/static/img/courseBuy/browse.png" alt=""></image>
					<view>{{introduce.courseWatchCount||0}}次</view>
				</view>
				<view class="people-row f-row">
					<image src="@/static/img/courseBuy/user.png" alt=""></image>
					<view>{{introduce.learnNum||0}}人</view>
				</view>
				<view class="good-comments-row f-row">
					<image src="@/static/img/courseBuy/scrito.png" alt=""></image>
					<view>{{introduce.goodsEvRate?introduce.goodsEvRate*100:0}}%好评</view>
				</view>
				<view class="good-comments-row f-row" @tap="dz_course">
					<image src="/static/img/courseBuy/praise.png" alt=""></image>
					<view>{{introduce.likes||0}}点赞</view>
				</view>
				<view class="collect-row f-row" @tap.stop='collectionFn'>
					<image :src="isConsult" alt=""></image>
					<view>收藏</view>
				</view>
			</view>
		</view>
		<view class="comments-introduce conten_lk" v-if="current == 0">
			<view class="comments-introduce-list">
				<view class="u-content">
					<u-parse :html="introduce.courseDescribe"></u-parse>
				</view>
			</view>
		</view>
		<view class="course-directory conten_lk" v-if="current == 1">
			<view class="courese-directory-row" v-for="(item,index) in directoryData" :key="item.id"
				@tap.stop="palyVideo(item)">
				<view class="course-play">
					<text>{{index+1}}</text>
					<view class="play-detail">
						<text>{{item.courseName}}</text>
						<view class="paly-time-row">
							<image src="@/static/img/courseBuy/playSquare.png" alt=""></image>
							<text>{{item.fileName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="comments-course conten_lk" v-else-if="current == 2">
			<view class="comprehensive-comments">
				<view class="comments-grade">
					<text>{{gradeAvg}}</text>
					<view class="favorable-rate-row">
						<view class="favorable-rate">
							<text>好评{{goodsEvRate}}%</text>
						</view>
						<view class="favorable-rate-img">
							<image :src="commentsImg.selected" alt=""></image>
							<image :src="commentsAll.gradeAvg >= 2 ? commentsImg.selected : commentsImg.slecet2" alt="">
							</image>
							<image :src="commentsAll.gradeAvg >= 3 ? commentsImg.selected : commentsImg.slecet2" alt="">
							</image>
							<image :src="commentsAll.gradeAvg >= 4 ? commentsImg.selected : commentsImg.slecet2" alt="">
							</image>
							<image :src="commentsAll.gradeAvg >= 4.5 ? commentsImg.selected : commentsImg.slecet2"
								alt=""></image>
						</view>
					</view>
					<view class="comments-detail">
						<view>
							<text>· 全部 {{commentsAll.evTotalCount}}</text>
							<text>· 好评 {{commentsAll.goodsEvCount}}</text>
						</view>
						<view>
							<text>· 中评 {{commentsAll.midEvCount}}</text>
							<text>· 差评 {{commentsAll.badEvCount}}</text>
						</view>
					</view>
				</view>
				<view class="comments-row" 
				@touchend="nextPage"
				v-for="(item,index) in comments" :key="index">
					<view class="comments-peo">
						<image :src="item.evaluaterFace ? item.evaluaterFace : '@/static/img/person/head.png'" alt=""
							class="header-img"></image>
						<view class="name-date">
							<text class="name">{{item.userName}}</text>
							<text class="date">{{item.userEvaluateTime.split(" ")[0]}}</text>
						</view>
						<view class="evaluation">
							<!-- <text>{{item.grade.toFixed(1)}}</text> -->
							<text>{{item.grade}}</text>
							<image :src="commentsImg.selected" alt=""></image>
							<image :src="item.grade >= 2 ? commentsImg.selected : commentsImg.slecet2" alt=""></image>
							<image :src="item.grade >= 3 ? commentsImg.selected : commentsImg.slecet2" alt=""></image>
							<image :src="item.grade >= 4 ? commentsImg.selected : commentsImg.slecet2" alt=""></image>
							<image :src="item.grade >= 4.5 ? commentsImg.selected : commentsImg.slecet2" alt=""></image>
						</view>
					</view>
					<view class="comments-text">
						<text>{{item.userEvaluate}}</text>
					</view>
					<view class="comments-msg">
						<view class="msg">
							<image src="@/static/img/courseBuy/comments.png" alt="" @tap="commentsApply(item)"></image>
							<text>{{item.childCount}}</text>
						</view>
						<view class="praise">
							<image :src="dz_img" alt="" @tap="isLikeHandle(item.id,index)"></image>
							<text>{{item.likes}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="recommended-course conten_lk" v-else-if="current == 3">
			<view class="recommended-row" @click="jumpNew(item)"
				v-for="item in recommended" :key="item.id">
				<image class="bg-set" :src="item.coverPath" mode="aspectFill"></image>
				<view class="teacher-information">
					<image :src="item.expertFace ? item.expertFace : '../../static/img/person/head.png'" alt=""></image>
					<text>{{item.expertName}}</text>
				</view>
				<view class="title">{{item.seriesName}}</view>
				<view class="frequency">
					{{item.categoryStr}}·{{item.courseDuration}}分钟·{{item.learnNum ? item.learnNum : '0'}}人次练过
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="free-study" v-if="isBuy">
				<text :style="`color:${introduce.isCharge == '0' ? '#49AE9C' : '#F4333C'}`"><text style="font-size:12px"
						v-if="introduce.isCharge != '0'">¥</text>{{introduce.isCharge == '0' ? '免费' : `${introduce.price ? introduce.price.toFixed(2) : '0.00'}`}}</text>
				<view class="study-row">
					<u-button type="default" shape="circle" class="study-btn" @click="studyHandle(introduce.id)"
						:style="`background-color:${introduce.isCharge == '0' ? '#49AE9C' : '#F4333C'}`"
						hover-class="none">
						{{introduce.isCharge == '0' ? '加入学习' : '立即购买'}}
					</u-button>
				</view>
			</view>
			<view class="course-comments" v-else @tap="openComments">
				<view class="comments-input">
					<input :disabled="true" />
					<!-- 	<img src="@/static/img/courseBuy/img.png" alt=""> -->
				</view>
				<text v-show="!isShowCommentsModal">发表评价</text>
			</view>
		</view>
		<!-- 回复评论footer -->
		<view class="apply-footer" v-if="applyShow">
			<view class="course-comments">
				<view class="comments-input">
					<u-input :clearable="false" placeholder="说点儿什么..." />
				</view>
				<view class="search-information">
					<view class="">
						<img src="@/static/img/courseBuy/comments.png" alt="">
						<text>3</text>
					</view>
					<view class="">
						<img src="@/static/img/courseBuy/praise2.png" alt="">
						<text>24</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comments-modal">
			<u-popup v-model="isShowCommentsModal" mode="bottom" @close="modalClose">
				<view class="comments-grade">
					<view class="comments-img">
						<image :src="commentsImg.current >= 1 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(1)"></image>
						<image :src="commentsImg.current >= 2 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(2)"></image>
						<image :src="commentsImg.current >= 3 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(3)"></image>
						<image :src="commentsImg.current >= 4 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(4)"></image>
						<image :src="commentsImg.current == 5 ? commentsImg.selected : commentsImg.slecet" alt=""
							@tap="choose(5)"></image>
					</view>
					<text>{{choose()}}星好评，课程非常棒！</text>
				</view>
				<view class="commets-input">
					<u-input v-model="commentsVal" :auto-height="true" maxlength="390" :clearable="false"
						type="textarea" placeholder="快来说说学习感受..." />
					<view v-if="commentsImg.src.length" class="add-img-row">
						<view class="add-img-detail" v-for="(item,index) in commentsImg.src" :key="index"
							:style="(index + 1 - 2)%3 == 0 ? 'margin: 12rpx 30rpx' : ''">
							<image :src="item" alt="" class="add"></image>
							<image src="@/static/img/courseBuy/del.png" alt="" class="del" @tap="delImg(index)"></image>
						</view>
					</view>
				</view>
				<view class="comments-input f-row end">
					<!-- 	<image src="@/static/img/courseBuy/img.png" alt="" @tap="chooseImg"></image> -->
					<view @tap="commentsModal" class="btn_comments">发表评价</view>
				</view>

			</u-popup>
		</view>
		<!-- 回复评论 -->
		<view class="apply-modal" @tap="close_child">
			<u-popup v-model="applyShow" mode="bottom" @close="applyClose">
				<view class="" v-if="comments_twp.currentItem">
					<text class="apply-num">{{comments_twp.currentItem.childCount}}条回复</text>
					<view class="published">
						<view class="userInformation" @tap.stop="answer_child(comments_twp.currentItem)">
							<image
								:src="comments_twp.currentItem.evaluaterFace?comments_twp.currentItem.evaluaterFace:''"
								alt=""></image>
							<view class="information">
								<text class="name">{{comments_twp.currentItem.userName}}</text>
								<text class="date">{{comments_twp.currentItem.userEvaluateTime}}</text>
							</view>
						</view>
						<view class="praise" @tap.stop="detail_dz">
							<image src="@/static/img/courseBuy/praise2.png" alt=""></image>
							<text>{{comments_twp.currentItem.likes}}</text>
						</view>
					</view>
					<text class="text">{{comments_twp.currentItem.userEvaluate}}</text>
					<!-- 回复评论 -->
					<view class="apply" v-if="comments_twp.children.length>0">
						<view class="apply-row" v-for="(i,k) in comments_twp.children" :key="k">
							<view class="published">
								<view class="userInformation" @tap.stop="answer_child(i)">
									<image :src="i.evaluaterFace ? i.evaluaterFace : '' " alt=""></image>
									<view class="information">
										<text class="name">{{i.evname}}</text>
										<text class="date">{{i.userEvaluateTime}}</text>
									</view>
								</view>
								<view class="praise" @tap.stop="dz_child(i.id,k)">
									<image src="@/static/img/courseBuy/praise2.png" alt=""></image>
									<text>{{i.likes}}</text>
								</view>
							</view>
							<text class="text">回复 <text class="username">{{i.replyToName}}</text>
								{{i.userEvaluate}}</text>
							<!-- 	<view class="" v-if="childeAnswerShow">
								<input class="uni-input input-my" focus placeholder="自动获得焦点" />
							</view> -->

						</view>
						<!-- <text class="search-all">查看全部回复</text> -->
					</view>
				</view>
				<view class="course-comments f-row  opop" v-if="childeAnswerShow">
					<input v-model="anuwer_Val" focus :placeholder="placeholder_footer" />
					<text @tap.stop="answer_commert_child">发表评论</text>
				</view>
			</u-popup>
		</view>
		<view class="footer-kong"></view>
	</view>
</template>

<script>
	import {
		API
	} from '../../config/myApi.js';
	import {
		lykApis
	} from '@/config/lykApi.js';
	export default {
		watch: {
			comments_twp() {
				this.childeAnswerShow = false
			},
			current(n, o) {
				if (n != 2) {
					this.commentPage = 1
					this.comments = []
				}
			}
		},
		onShow() {
			uni.stopPullDownRefresh(); //停止刷新
		},
		data() {
			return {
				placeholder_footer:"",
				showSharePage: false,
				commentTotal: null, //评论总数
				childeAnswerShow: false,
				commentPage: 1, //评论分页
				dz_img: "/static/img/courseBuy/praise2.png", ///static/img/courseBuy/praise.png
				video_time: null, //播放时长
				currentId: null, //当前id
				//tab菜单选项栏
				list: [{
					name: '介绍'
				}, {
					name: '目录'
				}, {
					name: '评价',
				}, {
					name: '推荐',
				}],
				current: 0,
				anuwer_Val: "", //回复内容
				//mock数据
				isBuy: false, //是否需要购买
				price: 99.99, //价格
				isShowCommentsModal: false,

				//课程介绍数据
				introduce: {
					//默认为空
					firstCoursePath: null
				},

				//课程目录
				directoryData: null,

				//课程评论汇总
				commentsAll: {
					gradeAvg: null,
				},
				//课程评论
				comments: [],
				//二级评论数据
				comments_twp: {
					currentItem: null
				},
				//课程推荐
				recommended: [{
					id: 1
				}, {
					id: 2
				}, {
					id: 3
				}, {
					id: 4
				}],

				//评论分数，添加图片评论
				commentsImg: {
					selected: '../../static/img/courseBuy/collect2.png',
					slecet: '../../static/img/courseBuy/collect3.png',
					slecet2: '../../static/img/courseBuy/collect.png',
					current: 4,
					src: [],
				},

				//评论输入框内容
				commentsVal: '',
				//回复评论弹窗显示
				applyShow: false,
				//回复评论数据
				applyData: {
					headerImg: '../../static/img/sportPurpose/three.png',
					username: 'C**执着',
					date: '2020-10-19',
					num: 4,
					praise: 24,
					commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					apply: [{
						headerImg: '../../static/img/sportPurpose/three.png',
						username: '跺脚的小蓝',
						date: '2020-10-19',
						praise: 24,
						commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					}, {
						headerImg: '../../static/img/sportPurpose/three.png',
						username: '跺脚的小蓝',
						date: '2020-10-19',
						praise: 24,
						commentsText: '持续的绿色投资驱动下，过去十年，中国在可再生能源、电动车等领域的技术创新脚步不断迈向新高度。',
					}]
				},
				twoItem: null, //二级回复对象
			}
		},
		onLoad(e) {
			let val = JSON.parse(e.val)
			this.currentId = val.id
			this.getCourseIntroduceFn();
			uni.$on('course_detail_share', val => {
				this.showSharePage = val == 'close' ? false : true
			})
		},

		computed: {
			
			//好评
			goodsEvRate() {
				if (this.commentsAll.goodsEvRate) {
					return (this.commentsAll.goodsEvRate * 100).toFixed(0)
				} else {
					return 0
				}
			},
			//评分
			gradeAvg() {
				if (this.commentsAll.gradeAvg) {
					return Number(this.commentsAll.gradeAvg).toFixed(1)
				} else {
					return 0
				}
			},

			//收藏图标
			isConsult() {

				if (this.introduce.isConsult == '0') {
					return '/static/img/courseBuy/collect.png'
				} else {
					return '/static/img/courseBuy/collect2.png'
				}
			}

		},
		methods: {
			//课程点赞
			dz_course() {
				lykApis.courseIsGood(this.introduce.id).then(res => {
					console.log(res, 999);
					if (this.introduce.likes) {
						this.introduce.likes = +this.introduce.likes + 1
					} else {
						this.introduce.likes = 1
					}

				})
			},
			//发表评价
			openComments() {
				if (this.current != 2) {
					return
				}
				this.isShowCommentsModal = true
			},
			//
			jumpNew(e) {
				uni.navigateTo({
					url: '/pages/course/courseDetail?val=' + JSON.stringify({
						id: e.id
					})
				})
			},
			//收藏
			collectionFn() {
				this.introduce.isConsult = this.introduce.isConsult == '0' ? '1' : '0'
				lykApis.icCollectionCourse({
					relationId: this.introduce.id,
					typeId: 1002001
				}).then(res => {
					// if (res.code == 200) {
					// 	uni.showToast({
					// 		title: '操作成功！',
					// 		icon: 'none'
					// 	})
					// } else {
					// 	uni.showToast({
					// 		title: '操作失败，请重试！',
					// 		icon: 'none'
					// 	})
					// }
				})
			},
			//获取课程信息
			getCourseIntroduceFn() {
				API.getCourseIntroduce({
					id: this.currentId
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code) {
						if (res.code == 200) {
							this.introduce = res.result;
							this.isBuy = this.introduce.payStatus == "UNPAID" ? true : false
							if (this.introduce.firstCoursePath.lastIndexOf(".mp4") != -1) {
								this.introduce.u_type = "u-video";
							} else if (this.introduce.firstCoursePath.lastIndexOf(".mp3") != -1) {
								this.introduce.u_type = "u-mp3";
							} else {
								this.introduce.u_type = "u-img";
							}
						}
					}
				})
			},
			//获取目录
			getCourseDirectory() {
				uni.stopPullDownRefresh()
				API.getCourseDirectory({
					id: this.currentId
				}).then(res => {
					if (res.code) {
						if (res.code == 200) {
							this.directoryData = res.result;
							this.directoryData.forEach((i) => {
								if (i.sourcePath.lastIndexOf(".mp4") != -1) {
									i.u_type = "u-video";
								} else if (i.sourcePath.lastIndexOf(".mp3") != -1) {
									i.u_type = "u-mp3";
								} else {
									i.u_type = "u-img";
								}
							});
							console.log('课程目录', res);
						}
					}
				})
			},
			//获取评价
			getCourseComments() {
				API.getCourseCommentsAll({
					id: this.currentId,

				}).then(res => {
					if (res.code) {
						if (res.code == 200) {
							this.commentsAll = res.result;
							console.log('课程评论', res);
						}
					}
				})
				API.getCourseComments({
					courseSeriesId: this.currentId,
					page: this.commentPage,
					rows: 10,
				}).then(res => {
					if (res.code == 200) {
						this.commentTotal = Number(res.result.total)
						this.comments = this.comments.concat(res.result.records)
						console.log('评论', res, this.comments);
					}
				})
			},
			//获取推荐
			getCourseRecommended() {
				API.getCourseRecommended({
					id: this.currentId
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code) {
						if (res.code == 200) {
							this.recommended = res.result;
							this.recommended.forEach(item=>{
								item.courseDuration=(item.courseDuration/60).toFixed(2)
							})
							console.log('课程推荐', res.result);
						}
					}
				})
			},
			//免费加入学习
			joinStudy(data) {
				console.log(data);
				API.joinStudy(data).then(res => {
					if (res.code) {
						if (res.code == 200) {
							// this.introduce = res.result;
							console.log('加入学习', res.result);
						}
					}
				})
			},

			//分享按钮
			scritoHandle() {
				console.log('分享');
			},
			change(index) {
				this.current = index;
				if (this.current == 0) {
					this.getCourseIntroduceFn();
				} else if (this.current == 1) {
					this.getCourseDirectory();
				} else if (this.current == 2) {
					this.getCourseComments();
				} else {
					this.getCourseRecommended();
				}

			},
			//添加评论图片
			chooseImg() {
				if (this.commentsImg.src.length == 9) {
					return
				};
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						// console.log(res);
						const tempFilePaths = res.tempFilePaths;
						this.commentsImg.src.push(tempFilePaths[0])
						// this.$forceUpdate();
					}
				});
			},
			//发表评论弹框
			publishHandle() {
				this.show_comment = true
				console.log('发表评论');
			},

			//发表评论
			commentsModal() {
				lykApis.answerComment({
					courseSeriesId: this.introduce.id,
					evaluateType: 0,
					grade: this.commentsImg.current,
					pid: 0,
					userEvaluate: this.commentsVal
				}).then(res => {
					if (res.message == '成功') {
						uni.showToast({
							title: '评价成功',
							icon: 'none'
						})
						this.isShowCommentsModal = false
						this.getCourseComments();
					} else {
						uni.showToast({
							title: '评价失败，请重试！',
							icon: 'none'
						})
					}
					console.log(res, 999);
				})
				// this.isShowCommentsModal = true;
				// document.querySelector('.comments-input').style.background = "none"
			},
			//关闭弹窗
			modalClose() {
				// this.isShowCommentsModal = false;
				// document.querySelector('.comments-input').style.background = "#F3F3F3"
			},
			//评论分数的显示
			choose(num) {
				if (num) {
					this.commentsImg.current = num;
				}
				if (this.commentsImg.current == 1) {
					return "一"
				} else if (this.commentsImg.current == 2) {
					return "二"
				} else if (this.commentsImg.current == 3) {
					return "三"
				} else if (this.commentsImg.current == 4) {
					return "四"
				} else if (this.commentsImg.current == 5) {
					return "五"
				}
			},
			//删除评论图片
			delImg(index) {
				this.commentsImg.src.splice(index, 1);
			},
			//二级回复
			answer_commert_child() {
				lykApis.answerComment({
					courseSeriesId: this.introduce.id,
					evaluateType: 1,
					grade: 0,
					pid: this.twoItem.id,
					userEvaluate: this.anuwer_Val
				}).then(res => {
					if (res.message == '成功') {
						uni.showToast({
							title: '回复成功',
							icon: 'none'
						})
						this.applyShow = false;
						this.childeAnswerShow = false
						this.getCourseComments();

					} else {
						uni.showToast({
							title: '回复失败，请重试！',
							icon: 'none'
						})
					}
				})
			},
			//二级回复弹框
			answer_child(i) {
				this.childeAnswerShow = true
				this.twoItem = i
				this.placeholder_footer="回复"+(i.evname?i.evname:"")
			},
			//二级评论点赞
			dz_child(id, k) {
				lykApis.putfabulous(id)
				this.comments_twp.children[k].likes = +this.comments_twp.children[k].likes + 1
			},
			//评论详情点赞
			detail_dz() {
				lykApis.putfabulous(this.comments_twp.currentItem.id)
				this.comments_twp.currentItem.likes = +this.comments_twp.currentItem.likes + 1
			},
			//评论回复详情
			commentsApply(e) {

				this.applyShow = true;
				this.comments_twp = {
					currentItem: e,
					children: e.child
				}
			},
			//关闭评论回复
			applyClose() {
				this.applyShow = false;
				this.placeholder_footer=""
			},
			//视频播放停止请求后端记录播放时间
			pause(e) {
				console.log(e);
			},
			//视频播放时间
			timeupdate(e) {
				this.video_time = e.detail.currentTime
				console.log(e.detail.currentTime);
			},
			//免费加入学习按钮
			studyHandle(courseId) {
				lykApis.buyCoursr({
					courseSeriesId: courseId
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '加入学习成功！',
							icon: 'none'
						})
						this.getCourseIntroduceFn()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},

			//是否点赞  无线点赞
			isLikeHandle(id, index) {
				this.comments[index].likes = (+this.comments[index].likes + 1).toString()
				lykApis.putfabulous(id)
				// this.dz_img='/static/img/courseBuy/praise.png'
				// if (this.comments[index].isLike == "like") {
				// 	this.comments[index].isLike = "unlike";
				// 	this.comments[index].likes = (+this.comments[index].likes - 1).toString();
				// } else {
				// 	this.comments[index].isLike = "like";
				// 	this.comments[index].likes = (+this.comments[index].likes + 1).toString();
				// }
			},
			//点击切换播放视频
			palyVideo(e) {
				if (this.isBuy) {
					uni.showToast({
						title: '请先购买或者加入学习！',
						icon: 'none'
					})
					return
				}
				console.log(e,998);
				this.setVideoTime()
				this.$set(this.introduce, 'firstCoursePath', e.sourcePath)
				this.$set(this.introduce, 'firstCourseId', e.courseSeriesId)
				this.videoContext = uni.createVideoContext("myvideo", this);
				// this.videoContext.play()
				// 	this.videoContext.play()
			},
			//记录播放时长
			setVideoTime() {
				if (this.introduce.u_type == 'u-video') {
					lykApis.playbackProgress({
						// "courseId": "课程目录id",
						//   "courseSeriesId": "课程id",
						//   "playTime": "播放的时间"
						courseSeriesId: this.introduce.id,
						playTime: this.video_time,
						courseId: this.introduce.firstCourseId
					}).then(res => {
						console.log(res, '保存进度');
						// 
					}).catch(err => {

					})
				}
			},
			close_child() {
				console.log(222);
			},
			//关注
			followFn(){
				console.log('关注');
				// let formData=new FormData()
				// formData.append('idolId',this.introduce.expertId)
				// formData.append('type',0)
				lykApis.followApi({
					idolId:this.introduce.expertId,
					type:0
				}).then(res=>{
					if(res.code!=200){
						uni.showToast({
							title:"操作失败，请重试",
							icon:"none"
						})
					}else{
						this.introduce.expertIsSub=this.introduce.expertIsSub=="0"?"1":"0"
					}
				})
			},
			//评论分页
			nextPage(){
				if (this.commentPage * 10 <= this.commentTotal) {
					this.commentPage = this.commentPage + 1
					this.getCourseComments()
				}
			}

		},
		onPullDownRefresh() {
			if (this.commentPage * 10 <= this.commentTotal) {
				this.commentPage = this.commentPage + 1
				this.getCourseComments()
				uni.stopPullDownRefresh(); //停止刷新
			}
		},
		onReachBottom() {
			if (this.commentPage * 10 <= this.commentTotal) {
				this.commentPage = this.commentPage + 1
				this.getCourseComments()
			}
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			console.log(e);
		},
	}
</script>

<style lang="scss" scoped>
	.opop {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
		border-top: 2rpx solid #E0E0E0;
		background: #fff;
		padding: 30rpx 30rpx;
		border-radius: 10rpx;

		text {
			color: #F4333C;
		}

		input {
			width: 548rpx;
		}
	}

	.btn_comments {
		box-shadow: 0px 5rpx 20rpx 0px rgba(180, 180, 180, 0.61);
		background: #F4333C;
		border-radius: 40rpx;
		background-color: #F4333C;
		color: #fff;
		margin-left: 40rpx;
		padding: 25rpx 70rpx;
		font-size: 30rpx;
	}

	.end {
		justify-content: flex-end;
	}

	.bg-set {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.f-row {
		display: flex;
		align-items: center;
	}

	.content {


		.paly-bar {
			position: relative;
			width: 100vw;
			height: 515rpx;


			.video {
				width: 100%;
				height: 515rpx;
				position: relative;
			}
		}

		.course-content {
			width: 100vw;
			background: #fff;
			overflow: hidden;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;

			.switch-tab {
				.switch-tab-bar {
					padding: 0rpx 146rpx;
				}
			}

			.course-introduce {
				display: flex;
				justify-content: space-between;
				padding: 0rpx 29rpx;
				margin-top: 38rpx;

				.text-introduce {
					width: 538rpx;

					>text {
						display: block;
					}

					>text:first-child {
						font-size: 32rpx;
						font-weight: bold;
						color: #2D2D2D;
					}

					>text:last-child {
						font-size: 26rpx;
						color: #939393;
						margin-top: 31rpx;
					}
				}
			}

			.teacher-msg {
				display: flex;
				flex-direction: column;
				align-items: center;

				.teacher-img {
					width: 68rpx;
					height: 68rpx;
					border-radius: 34rpx;
					overflow: hidden;

					image {
						width: 68rpx;
						height: 68rpx;
					}
				}

				>text:first-child {
					font-size: 20rpx;
					color: #1D1D1D;
					margin-top: 14rpx;
				}

				.attention {
					
					height: 28rpx;
					background: #FFF2F2;
					border-radius: 14rpx;
					margin-top: 14rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 18rpx;
						height: 17rpx;
					}

					>text {
						font-size: 20rpx;
						color: #F4333C;
					}
				}
			}

			.browse-history {
				font-size: 20rpx;
				padding: 0rpx 47rpx 24rpx 29rpx;
				margin-top: 51rpx;
				display: flex;
				justify-content: space-between;
				color: #C1C1C1;

				.frequency-row {
					display: flex;
					align-items: center;

					>image {
						width: 26rpx;
						height: 20rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}

				.people-row {
					display: flex;
					align-items: center;

					>image {
						width: 18rpx;
						height: 21rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}

				.good-comments-row {
					display: flex;
					align-items: center;

					>image {
						width: 20rpx;
						height: 22rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}

				.collect-row {
					display: flex;
					align-items: center;

					>image {
						width: 24rpx;
						height: 24rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}
			}
		}

		.comments-introduce {
			background: #fff;
			margin-top: 10rpx;

			.comments-introduce-list {
				padding: 30rpx 30rpx;
				// .comments-introduce-title {
				// 	display: flex;
				// 	align-items: center;
				// 	flex-direction: column;
				// 	height: 150rpx;

				// 	.num {
				// 		font-size: 36rpx;
				// 		color: #a7a7a7;
				// 		margin-top: 12rpx;
				// 	}

				// 	.title {
				// 		font-size: 42rpx;
				// 		margin-top: 8rpx;
				// 	}
				// }

				// .img {
				// 	height: 450rpx;
				// 	background: #e2e2e2;
				// 	margin-bottom: 70rpx;
				// }

				// .img:last-child {
				// 	margin-bottom: 20rpx;
				// }
			}
		}

		.course-directory {
			padding: 0rpx 30rpx;
			background: #fff;
			margin-top: 10rpx;

			.courese-directory-row {
				padding: 47rpx 0rpx 38rpx 0rpx;
				border-bottom: 1rpx solid #EEEEEE;

				.course-play {
					display: flex;

					>text {
						font-size: 28rpx;
						color: #333333;
					}

					.play-detail {
						margin-left: 22rpx;

						>text {
							font-size: 28rpx;
							color: #333333;
						}

						.paly-time-row {
							display: flex;
							align-items: center;
							margin-top: 32rpx;

							>image {
								width: 20rpx;
								height: 20rpx;
							}

							>text {
								font-size: 20rpx;
								color: #AFAFAF;
							}

							>text:nth-of-type(1) {
								margin-left: 16rpx;
							}

							>text:nth-of-type(2) {
								margin-left: 31rpx;
							}
						}
					}
				}
			}
		}

		.comments-course {
			padding: 0rpx 30rpx 30rpx;
			margin-top: 10rpx;
			background: #fff;
			overflow: hidden;
			overflow-y: scroll;

			.comprehensive-comments {
				.comments-grade {
					height: 208rpx;
					padding: 0rpx 50rpx;
					background: #F7F7F7;
					border-radius: 12rpx;
					margin-top: 29rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>text {
						font-size: 78rpx;
						font-weight: bold;
						color: #333333;
					}

					.favorable-rate-row {
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 16rpx;

						.favorable-rate {
							padding: 0rpx 8rpx 0rpx 12rpx;
							height: 38rpx;
							background-image: url(@/static/img/courseBuy/msgbg.png);
							background-size: cover;
							display: flex;
							justify-content: center;
							align-items: center;

							>text {
								font-size: 20rpx;
								color: #fff;
								margin-left: 8rpx;
							}
						}

						.favorable-rate-img {
							>image {
								width: 21rpx;
								height: 21rpx;
								margin-left: 4rpx;
							}
						}
					}

					.comments-detail {
						height: 100rpx;
						width: 250rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 20rpx;

						>view {
							display: flex;
							justify-content: space-between;
						}
					}
				}

				.comments-row {
					padding: 37rpx 0rpx 22rpx;
					border-bottom: 1rpx solid #EEEEEE;
					display: flex;
					flex-direction: column;

					.comments-peo {
						display: flex;

						.header-img {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
						}

						.name-date {
							margin-left: 19rpx;
							height: 72rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							>text {
								display: block;
							}

							.name {
								font-size: 28rpx;
								color: #333333;
							}

							.date {
								font-size: 20rpx;
								color: #868686;
							}
						}

						.evaluation {
							display: flex;
							align-items: center;
							margin-left: auto;

							>text {
								margin-right: 8rpx;
								font-size: 20rpx;
								color: #333333;
							}

							>image {
								width: 21rpx;
								height: 21rpx;
								margin-left: 4rpx;
							}

						}
					}

					.comments-text {
						font-size: 26rpx;
						color: #333333;
						margin-top: 36rpx;
						line-height: 40rpx;
					}

					.comments-msg {
						display: flex;
						margin-left: auto;
						margin-top: 30rpx;

						.msg,
						.praise {
							display: flex;
							align-items: center;

							>image {
								width: 20rpx;
								height: 20rpx;
							}

							>text {
								font-size: 20rpx;
								color: #9D9D9D;
								margin-left: 6rpx;
							}
						}

						.praise {
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		.recommended-course {
			padding: 0rpx 30rpx 30rpx;
			margin-top: 10rpx;
			z-index: -100;
			overflow-y: scroll;

			.recommended-row {
				position: relative;
				margin-top: 30rpx;
				height: 268rpx;
				border-radius: 12rpx;
				padding: 24rpx;
				overflow: hidden;

				.teacher-information {
					display: flex;
					align-items: center;

					>image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #fff;
						margin-left: 12rpx;
					}
				}

				>view {
					color: #fff;
				}

				.title {
					margin-top: 110rpx;
					font-size: 28rpx;
				}

				.frequency {
					margin-top: 10rpx;
					font-size: 20rpx;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 120rpx;
			background: #fff;
			box-shadow: 5rpx 0 20rpx #d6d6d6;

			.free-study {
				height: 120rpx;
				padding: 0rpx 41rpx 0rpx 73rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				>text {
					font-size: 34rpx;
					font-weight: bold;
					color: #49AE9C;
				}

				.study-row {
					.study-btn {
						color: #fff;
						height: 80rpx;
						width: 262rpx;
					}

					.u-hairline-border:after {
						border: none;
					}
				}
			}

			//付费过后评论
			.course-comments {
				height: 120rpx;
				padding: 0rpx 38rpx 0rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.comments-input {
					width: 548rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background: #F3F3F3;
					padding: 0rpx 29rpx;
					display: flex;
					align-items: center;
					position: relative;

					>img {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: 29rpx;
						top: 27%;
					}
				}

				>text {
					font-size: 28rpx;
					color: #F4333C;
				}
			}
		}

		//回复评论
		.apply-footer {
			width: 100vw;
			height: 120rpx;
			background: #fff;
			box-shadow: 5rpx 0 20rpx #d6d6d6;

			.course-comments {
				height: 120rpx;
				padding: 0rpx 38rpx 0rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.comments-input {
					width: 548rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background: #F3F3F3;
					padding: 0rpx 29rpx;
					display: flex;
					align-items: center;
				}
			}

			.search-information {
				display: flex;

				>view {
					>img {
						width: 20rpx;
						height: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #9D9D9D;
						margin-left: 6rpx;
					}
				}

				>view:last-of-type {
					margin-left: 23rpx;
				}

			}
		}

		.comments-modal {
			/deep/.u-drawer-bottom {
				// bottom: 120rpx;
			}

			/deep/.u-drawer-content {
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				padding: 0rpx 30rpx;
			}

			.comments-grade {
				display: flex;
				margin-top: 59rpx;

				.comments-img {
					>image {
						width: 35rpx;
						height: 35rpx;
						margin-left: 14rpx;
					}

					>image:first-child {
						margin: 0rpx;
					}
				}

				>text {
					font-size: 28rpx;
					color: #333333;
					margin-left: 52rpx;
				}
			}

			.commets-input {
				background: #F4F4F4;
				margin: 36rpx 0rpx 47rpx;
				padding: 30rpx 15rpx;

				.add-img-row {
					display: flex;
					flex-wrap: wrap;

					.add-img-detail {
						width: 200rpx;
						height: 200rpx;
						border-radius: 12rpx;
						position: relative;
						margin-top: 12rpx;

						.add {
							width: 200rpx;
							height: 200rpx;
						}

						.del {
							width: 28rpx;
							height: 28rpx;
							position: absolute;
							right: -14rpx;
							top: -14rpx;
						}
					}

					.add-img-detail:nth-of-type(2) {
						margin-left: 30rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		/deep/ .u-drawer__scroll-view {
			padding-bottom: 20rpx;
			// max-height: 80vh;
			max-height: calc(100vh - 650rpx);
			z-index: 999999999999999999;
		}

		.apply-modal {
			/deep/.u-drawer-bottom {
				// bottom: 120rpx;
			}

			/deep/.u-drawer-content {
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				padding: 0rpx 30rpx;
			}

			.apply-num {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 35rpx;
			}

			.published {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 65rpx;

				.userInformation {
					display: flex;
					align-items: center;

					>image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
					}

					.information {
						margin-left: 19rpx;

						.name {
							display: block;
							font-size: 28rpx;
						}

						.date {
							display: block;
							font-size: 20rpx;
							color: #868686;
						}
					}
				}

				.praise {
					>image {
						width: 20rpx;
						height: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #868686;
						margin-left: 6rpx;
					}
				}
			}

			.text {
				display: block;
				margin-top: 36rpx;
				font-size: 26rpx;
				line-height: 40rpx;
			}

			.apply {
				background: #F4F4F4;
				margin-top: 35rpx;
				padding: 38rpx 26rpx 37rpx 34rpx;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 54rpx;

				.apply-row {
					border-bottom: 1rpx solid #E0E0E0;
					padding: 22rpx 0rpx 26rpx;

					.published {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 0rpx;

						.userInformation {
							display: flex;

							>image {
								width: 54rpx;
								height: 54rpx;
							}

							.information {
								margin-left: 18rpx;

								.name {
									display: block;
									font-size: 26rpx;
								}

								.date {
									display: block;
									font-size: 20rpx;
									color: #868686;
								}
							}
						}

						.praise {
							>image {
								width: 20rpx;
								height: 20rpx;
							}

							>text {
								font-size: 20rpx;
								color: #868686;
								margin-left: 6rpx;
							}
						}
					}

					.text {
						display: block;
						margin-top: 36rpx;
						font-size: 26rpx;
						line-height: 40rpx;

						.username {
							color: #868686 !important;
							margin: 0rpx 14rpx;
						}
					}
				}

				.apply-row:last-of-type {
					border-bottom: none;
				}

				.search-all {
					margin-left: auto;
					color: #2F7DE7;
					font-size: 24rpx;
					margin-top: 31rpx;
				}
			}
		}

		.header-kong {
			width: 100vw;
			height: 866rpx;
		}

		.footer-kong {
			width: 100vw;
			height: 120rpx;
		}
	}

	.conten_lk {
		overflow-y: scroll;
		box-sizing: border-box;
		height: calc(100vh - 1010rpx);
		margin-top: 10rpx !important;
	}
</style>
